<template>
	<view class="off_port">
		<uni-nav-bar title="下班汇报"  :statusBar="true" leftIcon="back" :fixed="true" rightText="草稿箱" @clickLeft="back"></uni-nav-bar>
		<view class="login_user_info flex_row al_center">
				<view class="flex_col  flex_1 al_center" >
					<view class="flex_col head_item">
						<text>我的工种</text>
						<!-- <text>司机</text> -->
						<uni-notice-bar class="notice_bar"  backgroundColor="#fff" color="#333" single="false" text="司机"></uni-notice-bar>
						
					</view>
				</view>
				<view class="head_line"></view>
				<view class="flex_row flex_1 al_center">
					<view class="flex_col flex_1 head_item al_center">
						<text>汇报时间</text>
						<!-- scrollable="true" :speed="10" -->
						<uni-notice-bar class="notice_bar"  backgroundColor="#fff" color="#333" single="false" :text="nowTime"></uni-notice-bar>
					</view>
				</view>
				<view class="head_line"></view>
				<view class="flex_row flex_1 al_center">
					<view class="flex_col flex_1 head_item al_center">
						<text>位置</text>
						<uni-notice-bar class="notice_bar" show-icon="true"  backgroundColor="#fff" color="#333" single="false" :text="address"></uni-notice-bar>
					</view>
				</view>
			</view>
			
			<!-- //下班不要添加健康状况 -->
			<!-- <view class="full_width pd_bt_20 pd_tp_30">
				<text class="status_txt">健康状况</text>
			</view>
			<input class="health_status" v-model="healthStatus" placeholder="请输入您的健康状况"></input> -->
			
			<!-- <view class="full_width pd_bt_20 pd_tp_30">
				<text class="status_txt">安全</text>
			</view> -->
			
			<view class="report_list flex_col al_center mg_tp_10">
		
				<view class="report_item flex_row al_center">
					<text class="report_name form_lable">车牌号</text>
					<input type="text" v-model="plateNumber" class="flex_1 report_input" placeholder="请输入车牌号"/>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name form_lable" :style="{width:'300rpx'}">仪表盘当前公里数</text>
					<input type="number" v-model="startMileage" class="flex_1 report_input" placeholder="请输入"/>
					<text  class="report_value pd_rt_10" :style="{color:'#909090'}">Km</text>
				</view>
				<!-- <view class="report_item flex_row just_space_between al_center">
					<text class="report_name">按交规驾驶</text>
					<view class="flex_row al_center" @tap="toast">
						<text class="report_value" :style="{color:'#333'}">我保证</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view> -->
				<!-- //修改第一版本 -->
				<!-- <view class="report_item flex_row al_center">
					<text class="report_name form_lable">轮胎气压</text>
					<input type="number" v-model="pressure" class="flex_1 report_input" placeholder="请输入轮胎气压"/>
					<text  class="report_value pd_rt_10" :style="{color:'#909090'}">KPA</text>
				</view> -->
				<!-- //修改第二版本 -->
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">轮胎气压</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(pressure===-1)?0:pressure" :range="engineOptions" range-key="text" @change="changePicker($event,0)">
							<text v-if="pressure===-1" class="report_value" :style="{color:(pressure===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{engineOptions[pressure].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
					</view>
				</view>
		<!-- 		<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">轮胎气压</text>
					<view class="flex_row al_center">
						<text class="report_value">请选择</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view> -->
				
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">发动机</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(engine===-1)?0:engine" :range="engineOptions" range-key="text" @change="changePicker($event,1)">
							<text v-if="engine===-1" class="report_value" :style="{color:(engine===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{engineOptions[engine].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">车门</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(cardoor===-1)?0:cardoor" :range="cardoorOptions" range-key="text" @change="changePicker($event,2)">
							<text v-if="cardoor===-1" class="report_value" :style="{color:(cardoor===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{cardoorOptions[cardoor].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">水箱</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(waterTank===-1)?0:waterTank" :range="engineOptions" range-key="text" @change="changePicker($event,3)">
							<text v-if="waterTank===-1" class="report_value" :style="{color:(waterTank===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{engineOptions[waterTank].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">机油</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(machineOil===-1)?0:machineOil" :range="engineOptions" range-key="text" @change="changePicker($event,4)">
							<text v-if="machineOil===-1" class="report_value" :style="{color:(machineOil===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{engineOptions[machineOil].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
						
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">刹车与制动</text>
					<view class="flex_row al_center">
						<picker mode="selector" :value="(brake===-1)?0:brake" :range="engineOptions" range-key="text" @change="changePicker($event,5)">
							<text v-if="brake===-1" class="report_value" :style="{color:(brake===-1&&submitFlag)?'red':'#909090'}">请选择</text>
							<text v-else class="report_value" :style="{color:'#333'}">{{engineOptions[brake].text}}</text>
							<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
						</picker>
					</view>
				</view>
			</view>
			<view class="two_btn  flex_row">
				<view v-show="false" class="draft_btn flex_row just_center al_center">
					<text>保存到草稿</text>
				</view>
				<view class="submit_btn flex_row just_center al_center" @tap="submitPost">
					<text>立即提交</text>
				</view>
			</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				startMileage:'',
				lng: 114.044116,
				lat: 22.617529,
				address:'',
				submitFlag:false,
				pressure:-1,
				engine:-1,
				cardoor:-1,
				waterTank:-1,
				machineOil:-1,
				brake:-1,
				engineOptions:[{text:'正常'},{text:'异常'}],
				cardoorOptions:[{text:'已锁'},{text:'未锁'}],
				healthStatus:'',
				plateNumber: '粤Y9D380'
			}
		},
		computed:{
			nowTime:function(){
				return this.$utils.format(new Date(),"yyyy-MM-dd HH:mm")
			},
			...mapState(['refreshFlag'])
		},
		components:{
			uniNavBar,
			uniIcons
		},
		onLoad() {
			let _this = this
			uni.getLocation({
				geocode:true,
				success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
					_this.address = res.address.poiName
				}
			})
		},
		methods: {
			...mapMutations(['setRefresh']),
			toast(){
				uni.showToast({
					icon:'none',
					title:"不可选择！",
					duration:1000
				})
			},
			changePicker(e,index){
				switch(index){					
					case 0:this.pressure = e.detail.value;break;
					case 1:this.engine = e.detail.value;break;
					case 2:this.cardoor = e.detail.value;break;
					case 3:this.waterTank = e.detail.value;break;
					case 4:this.machineOil = e.detail.value;break;
					case 5:this.brake = e.detail.value;break;
				}
				
			},
			back(){
				this.$utils.navBack()
			},
			_isCarNo(value) {
				// 新能源车牌
				const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
				// 旧车牌
				const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
				if (value.length === 7) {
					return creg.test(value);
				} else if (value.length === 8) {
					return xreg.test(value);
				} else {
					return false;
				}
			},
			submitPost(){				
				this.submitFlag = true
				if( this.pressure<0||this.engine<0||this.cardoor<0||this.waterTank<0||this.machineOil<0||this.brake<0){
					uni.showToast({
						icon:'none',
						title:"认真选择每一项！",
						duration:1000
					})
					return false;
				}
				// if(this.healthStatus==null||this.healthStatus==''){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:"请填写健康状况！",
				// 		duration:1000
				// 	})
				// 	return false
				// }
				// if(this.pressure==null||this.pressure==''){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:"请填写轮胎气压！",
				// 		duration:1000
				// 	})
				// 	return false
				// }
				if(this.plateNumber==null||this.plateNumber==''){
					uni.showToast({
						icon:'none',
						title:"请填写车牌号！",
						duration:1000
					})
					return false
				}
				else
				{
					if(!this._isCarNo(this.plateNumber)){
						uni.showToast({
							icon:'none',
							title:"请填写正确车牌号！",
							duration:1000
						})
						return false
					}
				}
				let data = {
					"type":"pm",
					"lng":this.lng,
					"lat":this.lat,
					"startMileage":this.startMileage,
					"healthStatus": this.healthStatus,
					"plateNo": this.plateNumber,
					"createrId": uni.getStorageSync('userInfo').uid,
					"createrName": uni.getStorageSync('userInfo').userName,
					"projectId": "p0001",
					"safety": {
						"tirePressure": (this.pressure===0)?'正常':'异常',
						"engineState": (this.engine===0)?'正常':'异常',
						"waterTankState": (this.waterTank===0)?'正常':'异常',
						"engineOilState": (this.machineOil===0)?'正常':'异常',
						"brakeStopState": (this.brake===0)?'正常':'异常',
						"carDoorState": (this.cardoor===0)?'已锁':'未锁',
						"safeDrive": "我保证"
					}
				};
				
				//一定时间内禁止重复调用模式（例：3秒内禁止重复执行）
				this.$reclickcheck.canDoFunction({
				    key:"submitPost",//基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
				    time:3000,//如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
				    success:()=>{//成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
					
				        console.log('我被点击了')
						this.$utils.http.post('/dailywork/pm/driver/commit',data).then(res=>{
							//来解除事件锁定
							this.$reclickcheck.releaseKey("submitPost")
							
							if(res.code==200){
								uni.showToast({
									icon:'none',
									title:'提交成功',
									duration:1000,
								})
								setTimeout(()=>{
									this.setRefresh({flag:'pm'});
									console.log("=1 pm.refreshFlag="+this.refreshFlag);
									this.$utils.navBack()
								},1000)
							}
						})
				    }
				})
				
				
			}
		}
	}
</script>

<style scoped>
@import "@/common/css/main.css";
.off_port{
	width: 750rpx;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	background:#F6F6F6 ;
}
.work_head{
	width:750rpx;
	height:140rpx;
	background:#fff;
}
.head_line{
	width:1px;
	height:44rpx;
	background:#D7D7D7;
}
.head_item text:nth-child(1){
	font-size:30rpx;
	font-weight:500;
	color:#868686;
}
.head_item text:nth-child(2){
	margin-top: 10rpx;
	font-size:34rpx;
	font-weight:bold;
	color:#454545;
}
.status_txt{
	margin-left: 40rpx;
	font-size:32rpx;
	font-weight:500;
	color:#909090;
}
.health_status{
	width: 750rpx;
	height: 80rpx;
	background: #fff;
	padding-left: 40rpx;
	font-size: 30rpx;
	box-sizing: border-box;
}
.report_item{
	width: 690rpx;
	height: 120rpx;
	border-bottom: 1px solid #E8E8E8;
}
.report_name{
	font-size: 32rpx;
	color: #2E2D2D;
	font-weight: 500;
}
.report_value{
	font-size: 32rpx;
	color: #909090;
	font-weight: 500;
}
.report_list{
	width: 750rpx;
	background-color: #fff;
}
.two_btn{
	width: 750rpx;
	height: 130rpx;
	padding-top: 40rpx;
	text-align: center;
	background-color: #fff;
}
.draft_btn{
	margin-left: 34rpx;
	margin-top: 20rpx;
	width:200rpx;
	height:96rpx;
	background:#26AE6C;
	border-radius:10rpx;
	
}
.draft_btn text{
	font-size:32rpx;
	font-weight:bold;
	color:#fff;
}
.submit_btn{
	width:466rpx;
	height:76rpx;
	background:#345AD4;
	border-radius:10rpx;
	margin: 0 auto;
}
.submit_btn text{
	font-size:32rpx;
	font-weight:bold;
	color:#fff;
}


.form_lable{
	width: 200rpx;
}
.report_input{
	font-size: 32rpx;
}
.report_unit{
	padding-right: 32rpx;
}
.login_user_info{
		width: 750rpx;
		height: 130rpx;
		background-color: #fff;
		.head_line{
			width:1px;
			height:44rpx;
			background-color:#D7D7D7;
		}
		.head_item{
			text:nth-child(1){
				font-size:30rpx;
				color:#868686;
			}
			text:nth-child(2){
				padding-top: 10rpx;
				text-align: center;
				font-size:26rpx;
				color:#454545;
			}
		}
		.top_txt{
			font-size:30rpx;
			font-weight:500;
			color:#868686;
		}
		.notice_bar{
			width: 100%;
			padding: 10rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
